<template>
  <div>

    <myheader></myheader>

			<br><br>

            <!-- 面包屑导航 -->
            <Breadcrumb :datas='datas'></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">

            <table>

                <tr>
                    <td style="padding:5px">
                        商品名称：
                    </td>
                    <td style="padding:5px">
                        <input type="text" v-model='name'>
                    </td>

                </tr>

                <tr>
                    <td style="padding:5px">
                        商品标签：
                    </td>
                    <td style="padding:5px">

                      <TagInput v-model="mytags" type="string" split="," placeholder="请输入标签,输入完毕后直接按回车"></TagInput>

                    </td>

                </tr>



                <tr>
                    <td style="padding:5px">
                        商品简介：
                    </td>
                    <td style="padding:5px">

                        <quill-editor ref="myTextEditor" @click="editorchange($event)" :content="content" v-model="desc"></quill-editor>
                    </td>

                </tr>
                <tr>
                    <td style="padding:5px">
                      颜色：

                    </td>
                    <td style="padding:5px">

                      <input type="text" v-model="color"/>

                    </td>

                </tr>
                <tr>
                    <td style="padding:5px">
                      号码：

                    </td>
                    <td style="padding:5px">

                      <input type="text" v-model="size"/>

                    </td>
                </tr>
                <tr>
                    <td style="padding:5px">
                      季节：

                    </td>
                    <td style="padding:5px">

                      <input type="text" v-model="season"/>

                    </td>
                </tr>
                <tr>
                    <td style="padding:5px">
                      价格：

                    </td>
                    <td style="padding:5px">

                      <input type="text" v-model="price"/>

                    </td>
                </tr>



                <tr>
                    <td style="padding:5px">

                    </td>
                    <td style="padding:5px">
                        <Button @click="submit" color="green">提交</Button>




                    </td>

                </tr>

            </table>


		</div>
	</section>



    <mybody>

    </mybody>

  </div>

</template>



<script>

//导包
import myheader from './myheader.vue';
import mybody from './mybody.vue';
import { quillEditor } from 'vue-quill-editor';
//引入编辑器样式
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';


export default {
  data () {
    return {

      msg: "这是一个变量",
      //声明面包屑变量
      datas:[{title:'首页',route:{name:'index'}},{title:'修改商品'}],
      name:'',
      desc:'',
      color:'',
      size:'',
      season:'',
      price:0,
      cate_id:1,
      //商品标签变量
      mytags:'',
      //商品id
      id:'',
      //存储编辑器信息
      content:''

    }
  },
  //注册组件标签
  components:{
      'myheader':myheader,

      'mybody':mybody,
    quillEditor
  },

  mounted:function(){

        //接收商品id
    var id = this.$route.query.id;

    this.id = id;

    //调用接口
    this.getdata();
},
  methods:{

     //编辑器更改方法
    editorchange:function({editor,html,text}){

        this.desc = html;
        console.log(this.desc);

    },
    //提交
    submit(){

      //拼接商品规格
      var parms = {};
      parms['color'] = this.color;
      parms['size'] = this.size;
      parms['season'] = this.season;


      //格式化字符串
      parms = JSON.stringify(parms);
      console.log(parms);


      // //从字符串转回json
      // parms = JSON.parse(parms);
      // console.log(parms)


             //发送请求
        this.axios.get('http://localhost:8000/updategoods/',{params:{name:this.name,desc:this.desc,parms:parms,price:this.price,cate_id:this.cate_id,id:this.id}}).then((result) =>{

                console.log(result);

                this.$Message(result.data.message);


                this.axios.get('http://localhost:8000/updatetags/',{params:{id:result.data.id,tags:this.mytags}}).then((result) =>{

                console.log(result);


                 });

        });



    },

            //商品信息接口
    getdata:function(){


       //发送请求
        this.axios.get('http://localhost:8000/goodinfo/',{params:{id:this.id}}).then((result) =>{

                console.log(result);

                this.name = result.data.name;
                this.desc = result.data.desc;
                this.price = result.data.price;
                this.img = result.data.img;
                this.cate_id = result.data.cate_id;


                var parms = result.data.parms;

                //转换类型
                parms = JSON.parse(parms);

                this.color = parms.color;
                this.size = parms.size;
                this.season = parms.season;


                console.log(parms);

          });



               //请求商品标签详情

          this.axios.get('http://localhost:8000/gettags/',{params:{id:this.id}}).then((result) =>{

            console.log(result);

            //赋值
            var mytags = result.data.tags;

            mytags = mytags.join(",");
            this.mytags = mytags;

            // console.log(mytags);

           });


    },






    }
}


</script>

<style>
  /*控制编辑器高度*/
  .ql-editor{
    height: 300px;
  }



</style>
